<template>
  <div>
    <Modal
      v-model="addAlgoPluginModal"
      draggable
      scrollable
      title="新建算法"
      :width="1200"
      class="algoModel"
    >
      <p slot="header" class="modalHeader">新建算法</p>
      <p slot="close" @click="close" style="font-size: 1.2rem">x</p>
      <Row class="modalBody-algo">
        <Tabs type="card" :animated="true">
          <TabPane label="基本信息">
            <Form
              ref="formValidate"
              :model="algPackageInfoFormItem"
              :label-width="80"
              label-position="right"
              inline
              :rules="ruleValidate"
              class="algorithmList algoForm"
            >
              <FormItem prop="algName" label="算法名称">
                <Input
                  v-model="algPackageInfoFormItem.algName"
                  placeholder="请输入算法名称"
                />
              </FormItem>
              <FormItem label="算法简称">
                <Input
                  v-model="algPackageInfoFormItem.algNameAbbr"
                  placeholder="请输入算法简称"
                />
              </FormItem>
              <FormItem label="算法分组" prop="group">
                <Cascader
                  :data="groupDataCascader"
                  change-on-select
                  filterable
                  v-model="algPackageInfoFormItem.algGroupName"
                  class="algGroup"
                ></Cascader>
              </FormItem>
              <FormItem label="算法描述">
                <Input
                  v-model="algPackageInfoFormItem.desc"
                  placeholder="算法描述（可为空）"
                />
              </FormItem>
              <FormItem label="提供单位">
                <Input
                  v-model="algPackageInfoFormItem.algProvider"
                  placeholder="请输入算法提供单位"
                />
              </FormItem>
              <FormItem label="算法类型">
                <Select
                  v-model="algPackageInfoFormItem.algType"
                  class="algGroup"
                  @on-change="algoTypeChange"
                >
                  <Option
                    v-for="item in algoTypeOptions"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </FormItem>
              <FormItem label="算法标识" prop="algId">
                <Input
                  v-model="algPackageInfoFormItem.algId"
                  placeholder="请输入算法标识"
                />
              </FormItem>
              <FormItem label="版本" prop="algVersion">
                <Input
                  v-model="algPackageInfoFormItem.algVersion"
                  placeholder="请输入算法版本号"
                />
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="算法包">
            <Form
              ref="executeFormValidate"
              :model="algoFormItems"
              :label-width="124"
              label-position="right"
              :rules="ruleValidate"
              class="algoForm"
            >
              <FormItem prop="package" label="算法包文件：" v-show="isShowZip">
                <div style="display: flex">
                  <Input
                    v-model="algoFormItems.package"
                    placeholder="仅支持zip包"
                  />

                  <Upload
                    :before-upload="zipHandUpload"
                    action=""
                    :format="['zip']"
                    :accept="'.zip'"
                  >
                    <Button
                      type="primary"
                      class="system-btn-style"
                      style="margin-left: 10px"
                      >...</Button
                    >
                  </Upload>
                  <Button
                    type="primary"
                    icon="ios-cloud-upload-outline"
                    @click="uploadZipFile('zip')"
                    class="system-btn-style"
                    style="margin-left: 10px"
                    >上传</Button
                  >
                </div>
              </FormItem>

              <FormItem label="算法图片路径：" prop="iconFile">
                <div style="display: flex">
                  <Input
                    v-model="algoFormItems.iconFile"
                    placeholder="仅支持png"
                  />
                  <Upload
                    :before-upload="iconHandUpload"
                    action=""
                    :format="['jpg', 'png', 'jpeg']"
                    :accept="'.jpg,.png,.jpeg'"
                  >
                    <Button
                      type="primary"
                      class="system-btn-style"
                      style="margin-left: 10px"
                      >...</Button
                    >
                  </Upload>
                  <Button
                    type="primary"
                    icon="ios-cloud-upload-outline"
                    @click="uploadZipFile('icon')"
                    class="system-btn-style"
                    style="margin-left: 10px"
                    >上传</Button
                  >
                </div>
              </FormItem>
              <FormItem label="算法入口路径：" prop="commandPath">
                <Input
                  v-model="algoFormItems.commandPath"
                  placeholder="例如：/lib/PIEOrtho.exe"
                />
              </FormItem>

              <!-- <FormItem label="环境变量列表：">
                <Input
                  v-model="algoFormItems.commandPath"
                  placeholder="例如：/lib/PIEOrtho.exe"
                /> -->
              <!-- <Collapse>
                  <Panel>
                    请设置环境列表值
                    <div slot="content">
                      <div>
                        <CButton
                          @click="addSeletOptionBtn"
                          color="info"
                          class="system-btn-style"
                          style="margin-top: -10px"
                          >+</CButton
                        >
                      </div>

                      <Form
                        ref="executeFormValidate"
                        :label-width="20"
                        label-position="left"
                        :rules="ruleValidate"
                        inline
                        class="setSelectValueOptionsForm"
                        v-for="(item, index) in selectValueOptions"
                        :key="item.value"
                        :value="item.value"
                      >
                        <FormItem label="键：">
                          <Input
                            v-model="item.labelName"
                            size="samll"
                            placeholder=""
                          />
                        </FormItem>

                        <FormItem label="值：">
                          <Input
                            v-model="item.value"
                            size="samll"
                            placeholder=""
                          />
                        </FormItem>
                        <CButton
                          @click="clearSelectValueItem(item, index)"
                          color="info"
                          class="system-btn-style"
                          >-</CButton
                        >
                      </Form>
                    </div>
                  </Panel>
                </Collapse> -->
              <!-- </FormItem> -->

              <FormItem label="算法执行标识：" prop="commandId">
                <Input v-model="algoFormItems.commandId" placeholder="" />
              </FormItem>
              <FormItem label="镜像文件：" prop="baseImage">
                <Input
                  v-model="algoFormItems.baseImage"
                  placeholder="从已有的镜像中选择或者上传全新的镜像文件"
                />
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="参数信息">
            <div>
              <div class="paramTable">
                <div class="header-wrap">
                  <span>输入参数</span>
                  <div>
                    <!-- <CButton
                      @click="clearItem"
                      color="info"
                      class="system-btn-style"
                      >清除</CButton
                    > -->
                    <CButton
                      @click="addInputParamItemBtn"
                      color="info"
                      class="system-btn-style"
                      style="margin-left: 10px"
                      >+</CButton
                    >
                  </div>
                </div>

                <Table stripe :columns="inputColumns" :data="inputParams">
                  <template slot="operator" slot-scope="{ row, index }">
                    <CButton
                      v-c-tooltip="'编辑'"
                      title="编辑"
                      variant="outline"
                      color="info"
                      size="sm"
                      @click="editInputBtn(row, index)"
                    >
                      <CIcon name="cilPencil" />
                    </CButton>
                    <CButton
                      v-c-tooltip="'删除'"
                      title="删除"
                      variant="outline"
                      color="info"
                      size="sm"
                      @click="deleteInputRow(row, index)"
                    >
                      <CIcon name="cil-x-circle" />
                    </CButton> </template
                ></Table>
              </div>

              <div class="paramTable" style="margin-top: 20px">
                <div class="header-wrap">
                  <span>输出参数</span>
                  <div>
                    <!-- <CButton
                      @click="clearItem"
                      color="info"
                      class="system-btn-style"
                      >清除</CButton
                    > -->
                    <CButton
                      @click="addOutputParamItemBtn"
                      color="info"
                      style="margin-left: 10px"
                      class="system-btn-style"
                      >+</CButton
                    >
                  </div>
                </div>
                <Table stripe :columns="outputColumns" :data="outputParams">
                  <template slot="operator" slot-scope="{ row, index }">
                    <CButton
                      v-c-tooltip="'编辑'"
                      title="编辑"
                      variant="outline"
                      color="info"
                      size="sm"
                      @click="editOutputBtn(row, index)"
                    >
                      <CIcon name="cilPencil" />
                    </CButton>
                    <CButton
                      v-c-tooltip="'删除'"
                      title="删除"
                      variant="outline"
                      color="info"
                      size="sm"
                      @click="deleteOutputRow(row, index)"
                    >
                      <CIcon name="cil-x-circle" />
                    </CButton> </template
                ></Table>
              </div>
            </div>
          </TabPane>
          <TabPane label="执行信息">
            <Form
              ref="executeFormValidate"
              :model="executeFormItems"
              :label-width="128"
              label-position="right"
              :rules="ruleValidate"
              class="algoForm"
            >
              <FormItem prop="name" label="并行拆分方式：">
                <Select
                  v-model="executeFormItems.splitType"
                  style="width: 362px"
                >
                  <Option
                    v-for="item in batchOptions"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </FormItem>
              <FormItem label="拆分参数：">
                <Select
                  v-model="executeFormItems.splitItems"
                  style="width: 362px"
                  multiple
                >
                  <Option
                    v-for="item in inputParams"
                    :value="item.fieldName"
                    :key="item.fieldName"
                    >{{ item.labelName }}</Option
                  >
                </Select>
              </FormItem>
              <FormItem label="任务名称参数：" prop="taskNameFrom">
                <div v-show="!isShowTaskNameFrom" style="display: flex">
                  <Input
                    v-model="executeFormItems.taskNameFrom"
                    placeholder="可手动输入也可以点击选择按钮从输入参数中选择"
                  />
                  <Button
                    type="primary"
                    class="system-btn-style"
                    style="margin-left: 10px"
                    @click="selectTaskNameFromBtn"
                    >选择</Button
                  >
                </div>

                <Select
                  v-show="isShowTaskNameFrom"
                  v-model="executeFormItems.taskNameFrom"
                  style="width: 362px"
                >
                  <Option
                    v-for="item in inputParams"
                    :value="item.fieldName"
                    :key="item.fieldName"
                    >{{ item.labelName }}</Option
                  >
                </Select>
              </FormItem>
              <FormItem label="通过率（0-1）：" prop="passRate">
                <Input
                  v-model="executeFormItems.passRate"
                  placeholder="0-1的数值；默认1"
                />
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="资源信息">
            <Form
              ref="executeFormValidate"
              :model="resourceFormItems"
              :label-width="130"
              label-position="left"
              :rules="ruleValidate"
              class="algoForm"
            >
              <!-- <Checkbox v-model="resourceFormItems.isUseResource"
                >算法使用资源量</Checkbox
              > -->
              <FormItem prop="name" label="常规CPU（个）">
                <Input
                  v-model="resourceFormItems.requestCpu"
                  placeholder="不能超过计算节点CPU的最大核数"
                />
              </FormItem>
              <FormItem label="最大CPU（个）">
                <Input
                  v-model="resourceFormItems.limitCpu"
                  placeholder="不能超过计算节点CPU的最大核数；默认与常规CPU保持一致"
                />
              </FormItem>
              <FormItem label="常规内存（Gi）" prop="requestMemory">
                <Input
                  v-model="resourceFormItems.requestMemory"
                  placeholder="不能超过计算节点最大内存"
                />
              </FormItem>
              <FormItem label="最大内存（Gi）" prop="limitMemory">
                <Input
                  v-model="resourceFormItems.limitMemory"
                  placeholder="不能超过计算节点最大内存；默认与常规内存保持一致"
                />
              </FormItem>
              <FormItem label="GPU数量（个）" prop="gpu">
                <Input v-model="resourceFormItems.gpu" placeholder="" />
              </FormItem>
              <!-- <Checkbox v-model="resourceFormItems.isUseGPU">使用GPU</Checkbox> -->
            </Form>
          </TabPane>
        </Tabs>
      </Row>
      <template #footer>
        <CButton @click="save" color="info" class="system-btn-style"
          >保存</CButton
        >
        <CButton @click="submit" color="info" class="system-btn-style"
          >提交</CButton
        >
        <!-- <CButton @click="close" color="info" class="system-btn-style"
          >取消</CButton
        > -->
      </template>
    </Modal>

    <Modal
      v-model="addInputParamModel"
      draggable
      scrollable
      :width="800"
      class="algoModel"
      :styles="{ top: '50px' }"
    >
      <p slot="header" class="modalHeader">
        {{ isAddparamItem ? "新增" : "修改" }}输入参数
      </p>
      <p
        slot="close"
        @click="addInputParamModel = false"
        style="font-size: 1.2rem"
      >
        x
      </p>
      <Form
        ref="inputParamFormValidate"
        :model="inputParamItem"
        :label-width="124"
        label-position="right"
        inline
        :rules="inputParamRuleValidate"
        class="algorithmListForm algoForm"
      >
        <FormItem prop="labelName" label="参数中文名称：">
          <Input
            v-model="inputParamItem.labelName"
            placeholder="请输入参数中文名称"
          />
        </FormItem>
        <FormItem prop="fieldName" label="参数英文名称：">
          <Input
            v-model="inputParamItem.fieldName"
            placeholder="请输入参数英文名称："
          />
        </FormItem>
        <FormItem label="参数默认值：">
          <Input
            v-model="inputParamItem.defaultValue"
            placeholder="请输入参数默认值："
          />
        </FormItem>
        <FormItem label="参数描述：">
          <Input
            v-model="inputParamItem.describe"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入描述信息..."
          ></Input>
        </FormItem>
        <FormItem prop="type" label="参数类型：">
          <Select
            v-model="inputParamItem.type"
            class="algGroup"
            @on-change="inputParamTypeChange"
          >
            <Option
              v-for="item in paramTypeOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Collapse v-show="setSelectValueCollapse">
            <Panel>
              请设置下拉选择项值
              <div slot="content">
                <div>
                  <CButton
                    @click="addSeletOptionBtn"
                    color="info"
                    class="system-btn-style"
                    style="margin-top: -10px"
                    >+</CButton
                  >
                </div>

                <Form
                  ref="executeFormValidate"
                  :label-width="20"
                  label-position="left"
                  :rules="ruleValidate"
                  inline
                  class="setSelectValueOptionsForm"
                  v-for="(item, index) in selectValueOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  <FormItem label="键：">
                    <Input
                      v-model="item.labelName"
                      size="samll"
                      placeholder=""
                    />
                  </FormItem>

                  <FormItem label="值：">
                    <Input v-model="item.value" size="samll" placeholder="" />
                  </FormItem>
                  <CButton
                    @click="clearSelectValueItem(item, index)"
                    color="info"
                    class="system-btn-style"
                    >-</CButton
                  >
                </Form>
              </div>
            </Panel>
          </Collapse>
        </FormItem>
        <FormItem label="是否多值：">
          <i-switch
            :value="inputParamItem.plural"
            size="large"
            @on-change="change"
          >
            <span slot="open"></span>
            <span slot="close"></span
          ></i-switch>
        </FormItem>

        <FormItem
          prop="minValue"
          label="参数最小值："
          v-show="isShowinputNumber"
        >
          <Input v-model="inputParamItem.minValue" placeholder="请输入最小值" />
        </FormItem>
        <FormItem
          prop="maxValue"
          label="参数最大值："
          v-show="isShowinputNumber"
        >
          <Input v-model="inputParamItem.maxValue" placeholder="请输入最大值" />
        </FormItem>

        <FormItem label="扩展名约束：" v-show="isShowExtNameConstaints">
          <Select
            v-model="inputParamItem.extNameConstaints"
            class="algGroup"
            :multiple="true"
          >
            <Option
              v-for="item in extensionOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="是否必填：">
          <i-switch :value="inputParamItem.required" size="large">
            <span slot="open"></span>
            <span slot="close"></span
          ></i-switch>
        </FormItem>
        <FormItem label="是否显示：">
          <i-switch :value="inputParamItem.showSwitch" size="large">
            <span slot="open"></span>
            <span slot="close"></span
          ></i-switch>
        </FormItem>
        <FormItem prop="countFlag" label="统计景数：">
          <i-switch v-model="inputParamItem.countFlag" @on-change="change" />
        </FormItem>
      </Form>
      <template #footer>
        <CButton
          @click="addInputParamItemOk"
          color="info"
          class="system-btn-style"
          >确定</CButton
        >
        <CButton
          @click="addInputParamModel = false"
          color="info"
          class="system-btn-style"
          >取消</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addOutputParamModel"
      draggable
      scrollable
      title="新建输出参数"
      :width="800"
      class="algoModel"
    >
      <p slot="header" class="modalHeader">
        {{ isAddparamItem ? "新增" : "修改" }}参数输出参数
      </p>
      <p
        slot="close"
        @click="addOutputParamModel = false"
        style="font-size: 1.2rem"
      >
        x
      </p>
      <Form
        ref="outputParamFormValidate"
        :model="outputParamItem"
        :label-width="124"
        label-position="right"
        inline
        :rules="inputParamRuleValidate"
        class="algorithmListForm algoForm"
      >
        <FormItem prop="labelName" label="参数中文名称：">
          <Input
            v-model="outputParamItem.labelName"
            placeholder="请输入参数中文名称"
          />
        </FormItem>
        <FormItem prop="fieldName" label="参数英文名称：">
          <Input
            v-model="outputParamItem.fieldName"
            placeholder="请输入参数英文名称："
          />
        </FormItem>
        <FormItem label="来源字段名字：">
          <Input
            v-model="outputParamItem.fromName"
            placeholder="请输入参数来源字段名字(英文名字)："
          />
        </FormItem>
        <FormItem label="参数描述：">
          <Input
            v-model="outputParamItem.describe"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入描述信息..."
          ></Input>
        </FormItem>
        <FormItem prop="type" label="参数类型：">
          <Select v-model="outputParamItem.type" class="algGroup">
            <Option
              v-for="item in paramTypeOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="是否多值：">
          <i-switch :value="outputParamItem.plural" size="large">
            <span slot="open"></span>
            <span slot="close"></span
          ></i-switch>
        </FormItem>
        <FormItem prop="type" label="source来源：">
          <Select v-model="outputParamItem.source" class="algGroup">
            <Option
              v-for="item in sourceOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="tag标识：">
          <Select v-model="outputParamItem.tag" class="algGroup">
            <Option
              v-for="item in tagOptions"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
      </Form>
      <template #footer>
        <CButton
          @click="addOutputParamItemOk"
          color="info"
          class="system-btn-style"
          >确定</CButton
        >
        <CButton
          @click="addOutputParamModel = false"
          color="info"
          class="system-btn-style"
          >取消</CButton
        >
      </template>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "addAlgoPluginModal",
  props: {
    modalShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
    groupData:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      groupDataCascader:[],//分组数据
      isShowTaskNameFrom: false,
      currentParamItem: {}, //输入输出表格点击的当前对象
      isAddparamItem: true,
      isShowZip: true, //算法类型是command时需要上传zip依赖包，其他不需要
      zipFile: "",
      iconFile: "",
      inputParams: [],
      outputParams: [],
      addInputParamModel: false,
      addOutputParamModel: false,
      addAlgoPluginModal: false,

      setSelectValueCollapse: false,
      isShowExtNameConstaints: false,
      isShowinputNumber: false,

      selectValueOptions: [], //新增下拉选择的键值对数据
      batchOptions: [
        { label: "不拆分", value: "none" },
        { label: "拆分", value: "param" },
      ],
      algoTypeOptions: [
        { label: "command", value: "command" },
        { label: "python", value: "python" },
        { label: "python3", value: "python3" },
        { label: "java", value: "java" },
      ],
      sourceOptions: [
        { label: "input", value: "input" },
        { label: "task", value: "task" },
      ],
      tagOptions: [
        { label: "无", value: "" },
        { label: "输出参数是影像产品", value: "product" },
        { label: "输出参数是质检报告", value: "check-report" },
      ],
      paramTypeOptions: [
        { label: "字符串", value: "string" },
        { label: "文件", value: "file" },
        { label: "文件夹", value: "dir" },
        { label: "整型", value: "int" },
        { label: "浮点型", value: "float" },
        { label: "布尔型", value: "boolean" },
        { label: "下拉框", value: "select" },
        { label: "空间参考", value: "spatialref" },
        { label: "dem下拉框", value: "dem_select" },
        { label: "参考影像下拉框", value: "ref_select" },
        { label: "基准索引下拉框", value: "base_index_select" },
        { label: "json对象", value: "json_object" },
        { label: "project_image", value: "project_image" },
      ],
      extensionOptions: [
        { label: "tif文件", value: "*.tif" },
        { label: "tiff文件", value: "*.tiff" },
        { label: "img文件", value: "*.img" },
        { label: "dat文件", value: "*.dat" },
        { label: "hdr文件", value: "*.hdr" },
      ],
      dataCascader: [], //级联选择
      // 基本信息
      algPackageInfoFormItem: {
        algProvider: "航天宏图", //提供单位
        desc: "ceshi", //算法描述
        algName: "测试算法", //算法中文名称
        algNameAbbr: "测试算法", //算法简称
        algVersion: "1.0", //算法版本
        algGroupName: "", //算法分组
        algId: "pie.basic.ceshi", //算法标识
        algType: "command", //算法执行类型
      },
      // 执行信息
      executeFormItems: {
        splitType: "none", //拆分方式none, param
        splitItems: [], //拆分参数字段，来自输入参数
        taskNameFrom: "", //从输入参数中选择，或者默认字符串
        passRate: 1, //通过率， 0：不考虑算法执行结果 1：算法全部成功 other: (0,1)
      },
      algoFormItems: {
        package: "", //临时zip包
        iconFile: "", //临时定义
        iconPath: "/icon/image_ortho.png", //图标位置
        zipFilePath: "/icon/image_ortho.png", //算法压缩包位置
        commandPath: "dddd", //算法入口
        variable: [], //环境变量列表
        commandId: "", //算法标识
        baseImage: "dd", //基础镜像
      },
      resourceFormItems: {
        // isUseResource: true,
        // isUseGPU: false,
        requestCpu: 1,
        requestMemory: 2,
        limitCpu: 1,
        limitMemory: 2,
        gpu: 1,
      },
      ruleValidate: {
        algName: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        group: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        algVersion: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        algId: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],

        package: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        iconFile: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        commandPath: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        commandId: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        baseImage: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        package: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],

        passRate: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        taskNameFrom: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
      },

      inputParamRuleValidate: {
        labelName: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
        fieldName: [
          {
            required: true,
            message: "该值不能为空",
            trigger: "blur",
          },
        ],
      },
      inputParamItem: {
        defaultValue: "",
        fieldName: "",
        labelName: "",
        describe: "",
        type: "string",
        plural: false, //是否多值
        // constaints
        extNameConstaints: ["*.tif", "*.tiff"], //拓展名约束
        maxValue: 0,
        minValue: 0,
        optionValues: [
          //用于新增select 增加选项值
          {
            labelName: "",
            value: "",
          },
        ],

        required: false, //是否必填
        showSwitch: true, //是否显示

        countFlag: false, //统计图像处理景数, true: 该字段为影像数量统计参数，false: 不进行统计, 默认:false
      },
      outputParamItem: {
        labelName: "", //字段中文名称
        fieldName: "", //字段名称

        describe: "", //描述
        source: "task", //来源 task,input
        fromName: "", //来源字段名字
        type: "string", //参数类型
        plural: false, //是否多值
        tag: "", //特殊标识,默认值为空, product:标识该输出参数是影像产品, check-report:质检报告
      },
      inputColumns: [
        {
          title: "名称",
          key: "labelName",
        },
        {
          title: "类型",
          key: "type",
          align: "center",
          width: 100,
        },
        {
          title: "是否多值",
          key: "plural",
          align: "center",
          width: 100,
        },
        {
          title: "默认值",
          key: "defaultValue",
          align: "center",
          width: 100,
        },
        {
          title: "描述",
          key: "describe",
        },
        {
          title: "扩展名约束",
          key: "extNameConstaints",
          align: "center",
          width: 120,
        },
        {
          title: "最小值",
          key: "minValue",
          align: "center",
          width: 100,
        },
        {
          title: "最大值",
          key: "maxValue",
          align: "center",
          width: 100,
        },
        {
          title: "是否必填",
          key: "required",
          align: "center",
          width: 100,
        },
        {
          title: "是否显示",
          key: "showSwitch",
          align: "center",
          width: 100,
        },
        {
          title: "统计景数",
          key: "countFlag",
          align: "center",
          width: 100,
        },

        {
          title: "操作",
          key: "operator",
          slot: "operator",
          width: 100,
        },
      ],
      outputColumns: [
        {
          title: "名称",
          key: "labelName",
          align: "center",
        },
        {
          title: "类型",
          key: "type",
          align: "center",
          // width: 120,
        },
        {
          title: "是否多值",
          key: "plural",
          align: "center",
          // width: 120,
        },

        {
          title: "描述",
          key: "describe",
          align: "center",
          // width: 120,
        },
        {
          title: "来源类型",
          key: "source",
          align: "center",
          // width: 120,
        },
        {
          title: "来源名称",
          key: "fromName",
          align: "center",
          // width: 120,
        },
        {
          title: "特殊标识",
          key: "tag",
          align: "center",
          // width: 120,
        },
        {
          title: "操作",
          slot: "operator",
          width: 120,
        },
      ],
    };
  },
  watch: {
    modalShow: {
      handler(val) {
        this.addAlgoPluginModal = val;
      },
      deep: true,
      immediate: true,
    },
    groupData: {
      handler(val) {
        this.groupDataCascader=val;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    uploadZipFile(type) {
      let path = this.$api.modelApi.uploadAlgoSource;
      let file = "";

      let param = new FormData();
      if (type === "zip") file = this.zipFile;
      else file = this.iconFile;
      param.append("file", file);
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success("上传成功");
          if (type === "zip") {
            this.algoFormItems.zipFilePath = res.data.data;
          } else {
            this.algoFormItems.iconPath = res.data.data;
          }
        } else {
          this.$Message.console.error(res.data.message);
        }
      });
    },
    zipHandUpload(file) {
      this.zipFile = file;
      this.algoFormItems.package = file.name;
      return false;
    },
    iconHandUpload(file) {
      this.iconFile = file;
      this.algoFormItems.iconFile = file.name;
      return false;
    },
    // 得到提交参数
    getFormData(type) {
      let param = {
        action: type,
        algParamInfo: {
          inputParams: [],
          outputParams: [],
        },
        algBaseInfo: {},
        algResourceInfo: {},
        algExeInfo: {},
        algPackageInfo: {},
      };
      param.algParamInfo.inputParams = this.inputParams;
      param.algParamInfo.outputParams = this.outputParams;
      param.algBaseInfo = this.algPackageInfoFormItem; //算法基本信息
      param.algResourceInfo = this.resourceFormItems; //算法资源信息
      param.algExeInfo = this.executeFormItems; //算法执行信息
      param.algPackageInfo = this.algoFormItems; //算法包

      return param;
    },
    // 保存
    save() {
      let param = this.getFormData("edit");
      let path = this.$api.modelApi.addAlgPlugin;
      this.http.post(path, param).then((res) => {

        if (res.data.success) {
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    submit() {
      let param = this.getFormData("rebuild");
      let param1 = {
        action: "rebuild",
        algBaseInfo: {
          algDescribe: "df",
          algGroupName: "df",
          algId: "df",
          algName: "df",
          algNameAbbr: "df",
          algProvider: "df",
          algType: "command",
          algVersion: "df",
        },
        algExeInfo: {
          passRate: 0,
          splitItems: ["we"],
          splitType: "param",
          taskNameFrom: "we",
        },
        algPackageInfo: {
          baseImage: "ortho_base_image:1.0",
          commandId: "sd",
          commandPath: "/lib64/PIEOrthoBuildPry",
          iconPath: "",
          zipFilePath: "",
        },
        algParamInfo: {
          inputParams: [
            {
              countFlag: true,
              defaultValue: "e",
              describe: "ew",
              extNameConstraints: ["*.tif", "*.png", "*.jpg"],
              fieldName: "we",
              labelName: "ddd",
              maxValue: 0,
              minValue: 0,
              optionValues: [
                {
                  labelName: "df",
                  value: "df",
                },
              ],
              plural: false,
              required: false,
              showSwitch: false,
              type: "string",
            },
          ],
          outputParams: [
            {
              describe: "sds",
              fieldName: "dd",
              fromName: "eee",
              labelName: "test",
              plural: false,
              source: "task",
              tag: "product",
              type: "int",
            },
          ],
        },
        algResourceInfo: {
          enableSource: false,
          gpu: 0,
          limitCpu: "5",
          limitMemory: "8Gi",
          requestCpu: "3",
          requestMemory: "2Gi",
        },
        id: "",
      };
      let path = this.$api.modelApi.addAlgPlugin;
      this.http.post(path, param1).then((res) => {

        if (res.data.success) {
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    close() {
      this.$emit("close");
    },
    clearItem() {},

    deleteInputRow(item, index) {},
    deleteOutputRow(item, index) {},
    change(val) {},
    addInputParamItemBtn() {
      this.addInputParamModel = true;
    },
    addInputParamItemOk() {

      this.$refs["inputParamFormValidate"].validate((valid) => {
        if (valid) {
          if (this.isAddparamItem) {
            this.addInputParamItem();
          } else {
            this.updateInputParamItem();
          }
        } else {
          this.$Message.warning("请填写完整信息");
        }
      });
    },

    addInputParamItem() {

      let result = this.isRepeat(this.inputParams, this.inputParamItem, "add");
      if (!result) {
        if (this.inputParamItem.type === "select")
          this.inputParamItem.optionValues = JSON.parse(
            JSON.stringify(this.selectValueOptions)
          );
        else this.inputParamItem.optionValues = [];

        this.inputParams.push(JSON.parse(JSON.stringify(this.inputParamItem)));
        this.addInputParamModel = false;
      } else {
        this.$Message.warning(
          "输入参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    // 输入和输入参数之间对应的fileName和labelName不能重复
    isRepeat(paramArr, currentParam, type) {
      let flag = false; //是否有重复的
      for (let i = 0; i < paramArr.length; i++) {
        let ele = paramArr[i];
        if (type == "add") {
          if (
            ele.fieldName == currentParam.fieldName ||
            ele.labelName == currentParam.labelName
          ) {
            flag = true;
            break;
          }
        } else {
          if (
            this.currentParamItem.index != i &&
            (ele.fieldName == currentParam.fieldName ||
              ele.labelName == currentParam.labelName)
          ) {
            flag = true;
            break;
          }
        }
      }

      return flag;
    },
    updateInputParamItem() {
      let result = this.isRepeat(
        this.inputParams,
        this.inputParamItem,
        "update"
      );
      if (!result) {
        if (this.inputParamItem.type === "select")
          this.inputParamItem.optionValues = JSON.parse(
            JSON.stringify(this.selectValueOptions)
          );
        else this.inputParamItem.optionValues = [];

        this.$nextTick(() => {
          this.$set(
            this.inputParams,
            this.currentParamItem.index,
            JSON.parse(JSON.stringify(this.inputParamItem))
          );
        });

        this.addInputParamModel = false;
        this.isAddparamItem = true;
      } else {
        this.$Message.warning(
          "输入参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    addOutputParamItemBtn() {
      this.addOutputParamModel = true;
    },
    addOutputParamItemOk() {
      this.$refs["outputParamFormValidate"].validate((valid) => {
        if (valid) {
          if (this.isAddparamItem) {
            this.addOutputParamItem();
          } else this.updateOutputParam();
        }
      });
    },

    addOutputParamItem() {
      let result = this.isRepeat(
        this.outputParams,
        this.outputParamItem,
        "add"
      );
      if (!result) {
        this.outputParams.push(
          JSON.parse(JSON.stringify(this.outputParamItem))
        );
        this.addOutputParamModel = false;
      } else {
        this.$Message.warning(
          "输出参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    updateOutputParam() {
      let result = this.isRepeat(
        this.outputParams,
        this.outputParamItem,
        "update"
      );
      if (!result) {
        this.$nextTick(() => {
          this.$set(
            this.outputParams,
            this.currentParamItem.index,
            JSON.parse(JSON.stringify(this.outputParamItem))
          );
        });
        this.addOutputParamModel = false;
        this.isAddparamItem = true;
      } else {
        this.$Message.warning(
          "输出参数表格中中文名称或英文名称出现重复,请修改~"
        );
      }
    },
    deleteInputRow(row, index) {
      this.inputParams.splice(index, 1);
    },
    deleteOutputRow(row, index) {
      this.outputParams.splice(index, 1);
    },

    inputParamTypeChange(item) {
      if (item === "select") {
        this.setSelectValueCollapse = true;
      } else {
        this.setSelectValueCollapse = false;
      }
      if (item === "file") {
        this.isShowExtNameConstaints = true;
      } else this.isShowExtNameConstaints = false;

      if (item === "int" || item === "float") this.isShowinputNumber = true;
      else this.isShowinputNumber = false;
    },

    addSeletOptionBtn() {
      this.selectValueOptions.push({ labelName: "", value: "" });
    },
    clearSelectValueItem(item, index) {
      this.selectValueOptions.splice(index, 1);
    },
    algoTypeChange(val) {
      // if (val === "command") {
      //   this.isShowZip = true;
      // } else this.isShowZip = false;
    },
    editInputBtn(row, index) {
      this.isAddparamItem = false;
      this.addInputParamModel = true;
      this.currentParamItem = row;
      this.currentParamItem.index = index;
      this.inputParamItem = JSON.parse(JSON.stringify(row));
    },
    editOutputBtn(row, index) {
      this.isAddparamItem = false;
      this.addOutputParamModel = true;
      this.currentParamItem = row;
      this.currentParamItem.index = index;
      this.outputParamItem = JSON.parse(JSON.stringify(row));
    },
    selectTaskNameFromBtn() {
      this.isShowTaskNameFrom = true;
    },
  },
};
</script>
<style scoped>
.algGroup {
  width: 359px;
  height: 35px;
}

.modalBody-algo {
  height: 430px;
}

/* .algorithmListForm /deep/.ivu-form-item-content {
  width: 360px;
} */

/deep/.ivu-form-item-content {
  width: 360px;
}
/deep/ .ivu-form-item {
  margin-left: 60px;
}
.setSelectValueOptionsForm {
  display: flex;
}
.setSelectValueOptionsForm /deep/ .ivu-form-item-content {
  width: 100%;
}
.setSelectValueOptionsForm /deep/ .ivu-form-item {
  margin-left: 5px;
  display: flex;
  width: 140px;
}

.algoForm {
  margin-top: 20px;
  /* margin-left: 10px; */
}

.header-wrap {
  display: flex;
  justify-content: space-between;
}

/deep/.ivu-modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
</style>